<template>
  <div>
    <div class="test">
      <div class="gka__live lego-live__animation"></div>
    </div>
    <h2 @click="$router.push('/')">text list</h2>
    <com-list :list="items" @del="remove" />
  </div>
</template>

<script>
import comList from './components/comList.vue';
// vue2-flip-countdown
// vue-flip-down
export default {
  name: 'animDe',
  components: {
    comList
  },
  data() {
    return {
      items: [
        {
          id: 1,
          name: 'name1'
        },
        {
          id: 2,
          name: 'name2'
        },
        {
          id: 3,
          name: 'name3'
        },
        {
          id: 4,
          name: 'name4'
        },
        {
          id: 5,
          name: 'name5'
        },
        {
          id: 6,
          name: 'name6'
        },
        {
          id: 7,
          name: 'name7'
        },
        {
          id: 8,
          name: 'name8'
        }
      ],
      nextNum: 10
    };
  },
  methods: {
    remove(id) {
      this.items = this.items.filter(item => item.id !== id);
    }
  }
};
</script>

<style scoped>
.test {
  width: 1.8rem;
  height: 1.4rem;
  position: relative;
  border: 1px solid rosybrown;
}
.gka__live {
  width: 13.333vw;
  height: 24vw;
  -webkit-transform: scale(0.7);
  transform: scale(0.7);
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
  background-image: url('https://m.360buyimg.com/babel/jfs/t1/141119/32/530/13381/5ee343eeE25eb0dde/43f86b5643ba2962.png');
  background-size: 186.667vw 24vw;
  background-repeat: no-repeat;
  -webkit-animation-name: keyframes-image;
  animation-name: keyframes-image;
  -webkit-animation-duration: 1.4s;
  animation-duration: 1.4s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: steps(1);
  animation-timing-function: steps(1);
}
.lego-live__animation {
  position: absolute;
  left: 12vw;
  bottom: 0.667vw;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
  -webkit-transform: scale(0.7);
  transform: scale(0.7);
}

@keyframes keyframes-image {
  0% {
    width: 13.333vw;
    height: 24vw;
    background-image: url('https://m.360buyimg.com/babel/jfs/t1/141119/32/530/13381/5ee343eeE25eb0dde/43f86b5643ba2962.png');
    background-size: 186.667vw 24vw;
  }
  7.14% {
    background-position: -13.333vw 0;
  }
  14.29% {
    background-position: -26.667vw 0;
  }
  21.43% {
    background-position: -40vw 0;
  }
  28.57% {
    background-position: -53.333vw 0;
  }
  35.71% {
    background-position: -66.667vw 0;
  }
  42.86% {
    background-position: -80vw 0;
  }
  50% {
    background-position: -93.333vw 0;
  }
  57.14% {
    background-position: -106.667vw 0;
  }
  64.29% {
    background-position: -120vw 0;
  }
  71.43% {
    background-position: -133.333vw 0;
  }
  78.57% {
    background-position: -146.667vw 0;
  }
  85.71% {
    background-position: -160vw 0;
  }
  92.86%,
  100% {
    background-position: -173.333vw 0;
  }
}
</style>
